<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .menu{
            list-style: none;
            padding: 0px;
            margin: 0px;
            display: flex;
            flex-flow: row nowrap;
            font-weight: bold;
        }
        .menu li{
            margin: 0px 10px;
            padding: 16px 24px;
            cursor: pointer;
            user-select: none;
        }
        .menu li:hover{
            color: orange;
        }
        .cbox{
            border: 1px solid #999;
            padding: 20px;
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            SPA项目:single page web application (单页应用程序) 
                主体展示的容器页面只有一个，其他内容模板页面通过JS操作完成渲染
        </p>
        <p>
            MPA项目:多个SPA项目合成的完整项目
        </p>
        <h4>动态组件</h4>
        <pre>
        动态组件是vue语法自定义的组件切换方案，通过if逻辑判断实现组件切换操作；
        渲染组件的选择由 动态组件component的必传属性is，取值组件名称完成调用；
        </pre>
        <ul class="menu">
            <li @click="changePage('HomePage')">首页</li>
            <li @click="changePage('ListPage')">列表</li>
            <li @click="changePage('AboutPage')">关于我</li>
        </ul>
        <hr>
        <!-- <home-page v-if="pageName=='HomePage'"></home-page>
        <list-page v-if="pageName=='ListPage'"></list-page>
        <about-page v-if="pageName=='AboutPage'"></about-page> -->
        <component :is="pageName"></component>
        <hr>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../../assets/vue3/vue.esm-browser.js"
        const HomePage = {
            template:`
            <div class="cbox">
                <h4>首页</h4>
            </div>
            `
        }
        const ListPage = {
            template:`
            <div class="cbox">
                <h4>列表</h4>
            </div>
            `
        }
        const AboutPage = {
            template:`
            <div class="cbox">
                <h4>关于我</h4>
            </div>
            `
        }
        createApp({
            components: {
                HomePage,ListPage,AboutPage
            },
            data(){
                return {
                    pageName:"HomePage"
                }
            },
            methods: {
                changePage(name) {
                    this.pageName = name;
                    location.hash = this.pageName;
                },
                initShowPage(){
                    let hashName = location.hash;
                    console.log(hashName);
                    if(hashName==""){
                        return;
                    }
                    this.pageName = hashName.replace(/^#/,"");
                }
            },
            created () {
                this.initShowPage()
            },
        }).mount("#app")
    </script>
</body>
</html>